<template>
    <div class="room-bg">
        <Music ref="musicRef" />
        <!-- 玩家头像布局 -->
        <div class="player-avatars">
            <!-- 顶部左右两个对手头像 -->
            <div class="avatar-container opponent left">
                <div class="identity-tag" :class="{ 'game-started': isGameStarted, [userRole]: userRole }">
                    {{ isGameStarted ? userRole : '用户' }}
                </div>
                <div style="position: relative;">
                    <img class="avatar" src="@/assets/images/avatar/1.png" alt="对手1" />
                    <img src="@/assets/images/card/image.png" alt="卡牌背面" style="width: 100px; height: 150px;" />
                    <span class="remaining-cards"
                        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px; text-align: center;">{{
                            opponent1Cards }}</span>
                </div>
                <!-- 调整用户信息结构为上下排列 -->
                <div class="user-info">
                    <div class="chips-row">
                        <img class="coin-icon" src="@/assets/images/coin.png" alt="筹码" />
                        <span class="chips">{{ userInfo.chips }}</span>
                    </div>
                    <span class="username">{{ userInfo.username }}</span>
                </div>
            </div>

            <div class="avatar-container opponent right">
                <div class="identity-tag" :class="{ 'game-started': isGameStarted, [userRole]: userRole }">
                    {{ isGameStarted ? userRole : '用户' }}
                </div>
                <div style="position: relative;">
                    <img class="avatar" src="@/assets/images/avatar/2.png" alt="对手2" />
                    <img src="@/assets/images/card_img/image.png" alt="卡牌背面" style="width: 100px; height: 150px;" />
                    <span class="remaining-cards"
                        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px; text-align: center;">{{
                            opponent2Cards }}</span>
                </div>
                <!-- 右侧玩家信息容器 -->
                <div class="user-info">
                    <div class="chips-row">
                        <img class="coin-icon" src="@/assets/images/coin.png" alt="筹码" />
                        <span class="chips">{{ userInfo.chips }}</span>
                    </div>
                    <span class="username">{{ userInfo.username }}</span>
                </div>
            </div>

            <!-- 底部左侧本人头像 -->
            <div class="avatar-container self">
                <div class="identity-tag" :class="{ 'game-started': isGameStarted, [userRole]: userRole }">
                    {{ isGameStarted ? userRole : '用户' }}
                </div>
                <img class="avatar" src="@/assets/images/avatar/3.png" alt="本人" />
                <div class="user-info">
                    <div class="chips-row">
                        <img class="coin-icon" src="@/assets/images/coin.png" alt="筹码" />
                        <span class="chips">{{ userInfo.chips }}</span>
                    </div>
                    <span class="username">{{ userInfo.username }}</span>
                </div>
            </div>
        </div>
        <!-- 新增本人手牌区域 -->
        <div v-if="gameStatus === 1" class="my-cards" :style="{ width: '70%', margin: '0 auto' }">
            <div v-for="(card, index) in userCards" :key="index">
                <img :src="card.imageUrl" alt="玩家手牌">
            </div>
        </div>
        <!-- 新增剩余三张卡牌背面 -->
        <div v-if="gameStatus === 1" class="remaining-three-cards">
            <img v-for="i in 3" :key="i" src="@/assets/images/card_img/image.png" alt="剩余卡牌背面">
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed } from 'vue'
import Music from '@/components/Music.vue'
import { useStore } from 'vuex'
const store = useStore()
const user_info = computed(() => store.state.user.userInfo)
const room_info = computed(() => store.state.user.roomInfo)
console.log('room_info', room_info.value)
console.log('user_info', user_info.value)
const user = ref({
    opponent: [{
        avatar: 0,
        username: '',
        chip: 0,
    }, {
        avatar: 0,
        username: '',
        chip: 0,
    }],

    userRole: '用户',
    avatar: 0,
    username: '',
    chip: 0,
    id: null
});
const musicRef = ref(null)
// 新增状态变量
const isGameStarted = ref(1) // 牌局是否开始
const userRole = ref('平民') // 当前身份：'平民'或'地主'
const userInfo = reactive({ // 用户基本信息
    username: '玩家昵称',
    chips: 12345 // 筹码数量
})
const opponent1Cards = ref(0) // 对手 1 剩余卡牌数量
const opponent2Cards = ref(0) // 对手 2 剩余卡牌数量
const gameStatus = ref(0) // 新增牌局状态变量
const userCards = ref([]) // 管理用户当前卡牌数据的数组

onMounted(() => {
    if (musicRef.value && musicRef.value.playbg) {
        musicRef.value.playbg('bg_room1', true)
    }
})

const generateRandomCards = () => {
    const suits = ['RedHearts', 'Spades', 'Square', 'ThePlumBlossom'];
    const ranks = ['3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A', '2'];
    const jokers = ['Joker1', 'Joker2'];
    let allCards = [];

    suits.forEach(suit => {
        ranks.forEach(rank => {
            allCards.push({ suit, rank });
        });
    });

    allCards = allCards.concat(jokers.map(joker => ({ suit: 'Joker', rank: joker })));

    // 洗牌
    for (let i = allCards.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [allCards[i], allCards[j]] = [allCards[j], allCards[i]];
    }

    // 斗地主发牌逻辑
    const player1 = allCards.slice(0, 17);
    const player2 = allCards.slice(17, 34);
    const player3 = allCards.slice(34, 51);
    const bottomCards = allCards.slice(51);

    return {
        player1,
        player2,
        player3,
        bottomCards
    };
};

const { player1, player2, player3, bottomCards } = generateRandomCards();
userCards.value = player1;
</script>

<style lang="scss" scoped>
.room-bg {
    width: 100vw;
    height: 100vh;
    background: url('@/assets/images/desk.jpg') no-repeat center center;
    background-size: cover;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.player-avatars {
    position: absolute;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}

// 新增头像容器样式
.avatar-container {
    position: absolute;
    pointer-events: none; // 保持原有不可点击特性

    .identity-tag {
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: bold;
        white-space: nowrap;
        background: #999; // 默认未开始灰色
        color: #fff;

        &.game-started {
            &.平民 {
                background: #2196f3;
            }

            // 蓝色
            &.地主 {
                background: #ffd700;
            }

            // 金色
        }
    }

    .avatar {
        // 继承原有头像样式
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 3px solid #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        background: #eee;
    }

    .user-info {
        position: absolute;
        top: 120%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        /* 关键修改：上下排列 */
        gap: 4px;
        /* 上下元素间距 */
        color: #fff;
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);

        .chips-row {
            display: flex;
            align-items: center;
            /* 筹码图标与数字水平对齐 */
            gap: 4px;
        }

        .coin-icon {
            height: 16px;
            width: 16px;
        }

        .chips {
            font-size: 14px;
        }

        .username {
            font-size: 14px;
            font-weight: 500;
        }
    }
}

// 调整原有位置样式到容器
.avatar-container.opponent.left {
    top: 40px;
    left: 60px;
}

.avatar-container.opponent.right {
    top: 40px;
    right: 60px;
}

.avatar-container.self {
    bottom: 40px;
    left: 60px;
}

.my-cards {
    position: absolute;
    bottom: 20px;
    left: 15%;
    display: flex;
    justify-content: center;
}

.remaining-three-cards {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

@media (max-width: 768px) {
    .avatar-container {
        .avatar {
            width: 60px;
            height: 60px;
        }

        .user-info {
            font-size: 12px;
        }
    }

    .avatar-container.opponent.left {
        top: 20px;
        left: 20px;
    }

    .avatar-container.opponent.right {
        top: 20px;
        right: 20px;
    }

    .avatar-container.self {
        bottom: 20px;
        left: 20px;
    }
}
</style>